<template>
    <div class="nav-bar van-hairline--top">
      <ul class="nav-list">
       <router-link class="nav-list-item" to="home">
          <i class="nbicon nblvsefenkaicankaoxianban-1"></i>
          <span>首页</span>
        </router-link>
        <router-link class="nav-list-item" to="category">
          <i class="nbicon nbfenlei"></i>
          <span>分类</span>
        </router-link>
        <router-link class="nav-list-item" to="cart">
          <i class="nbicon nbgouwuche"></i>
          <span>购物车</span>
        </router-link>
        <router-link class="nav-list-item" to="user">
          <i class="nbicon nblvsefenkaicankaoxianban-"></i>
          <span>我的</span>
        </router-link>
      </ul>
    </div>
  </template>
  
  <script>
    export default {
		name:'NavBar'
    }
  </script>

<style lang="less" scoped >
    @import '../theme/custom.less';
    .nav-bar{
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 5px 0;
      z-index: 1000;
      background: #fff;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
	  .nav-list {
        .fj();
		width: 100%;
        padding: 0;
        .nav-list-item {
          display: flex;
          flex: 1;/*每一项等宽 */
          flex-direction: column;/*纵向布局 */
          text-align: center;/*文字居中对齐 */
          color: #666;
          /*单击触发高亮 */
          &.router-link-active {
            color: @primary;
          }
          i {
            text-align: center;
            font-size: 22px;
          }
          span{
            font-size: 12px;
          }
        }
	  }
    }
</style>